<template>
	<view class="chart-detail-wrap">
		<view class="daterange-box">
			<view class="date-label">
				<text>查询时间范围</text>
			</view>
			<view class="date-value">
				<text>2025-06-12至2025-06-20</text>
			</view>
			<view class="confirm-btn">
				<text>查询</text>
			</view>
		</view>
		<view class="chart-box">
			<view class="chart-title">
				<text>制水历史</text>
			</view>
			<view class="chart-wrap">
				<qiun-data-charts :ontouch="true" type="column" :opts="columnOpts" :chartData="columnChartData" />
			</view>
		</view>
		<view class="chart-box">
			<view class="chart-title">
				<text>原水水质</text>
			</view>
			<view class="chart-wrap">
				<qiun-data-charts :ontouch="true" type="line" :opts="lineOption1" :chartData="lineData1" />
			</view>
		</view>
		<view class="chart-box">
			<view class="chart-title">
				<text>净水水质</text>
			</view>
			<view class="chart-wrap">
				<qiun-data-charts :ontouch="true" type="line" :opts="lineOption1" :chartData="lineData2" />
			</view>
		</view>
	</view>
</template>

<script>
	import { getColumnOption, getLineOption } from "./option"
	export default {
		data() {
			return {
				columnOpts: getColumnOption(),
				lineOption1: getLineOption(),
				lineOption2: getLineOption(),
				columnChartData: {},
				lineData1: {},
				lineData2: {},
			}
		},
		created() {
			this.getColumnData()
			this.getServerData()
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
						series: [{
							name: "原水水质",

							data: [15, 45, 15, 45, 15, 45, 15, 45]
						}, ]
					};
					const data = JSON.parse(JSON.stringify(res));
					this.lineData1 = data
					this.lineData2 = data
				}, 500);
			},
			getColumnData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026"],
						series: [{
							name: "单次制水量",
							data: [35, 36, 31, 33, 13, 34, 20, 18, 20],
							unit: 'L',
							gridType: 'dash'
						}]
					};
					this.columnChartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.chart-detail-wrap {
		padding: 26rpx 34rpx;
		box-sizing: border-box;
		position: relative;

		.chart-box {
			margin-top: 26rpx;

			.chart-wrap {
				width: 100%;
				height: 460rpx;
			}

			.chart-title {
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
				line-height: 48rpx;
				text-align: center;
				margin-bottom: 16rpx;
			}
		}

		.daterange-box {
			.confirm-btn {
				margin-top: 22rpx;
				width: 82rpx;
				height: 51rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #3361F0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: #3361F0;
			}

			.date-value {
				font-size: 26rpx;
				color: #3361F0;
				line-height: 48rpx;
				margin-top: 10rpx;
			}

			.date-label {
				font-size: 28rpx;
				color: #000000;
				line-height: 48rpx;
			}
		}
	}
</style>